今日，我們來對程式碼進行重構，以提升未來的可擴展性和維護便利性。以下幾項微調：

• 統一移動端和桌面端的拖曳事件處理機制
• 精簡動畫處理的相關變數，包括 currentTimelinePosition、timelineEventsStyleRaw、以及 timelineEventsStyleRawAnimationTarget
• gameStatus 數據初始化流程調整

統一了移動端和桌面端的拖曳事件處理機制

為了提高程式碼的可維護性和效率，我們將 mobile和 mouse事件整合到一個單一的函數中。這樣做不僅簡化了事件處理邏輯，可避免功能都要重分修改兩邊，也使得未來的修改和擴展更為方便。具體來操作就是，我們使用 handleClueCardInteractionStart 函數來處理滑鼠的 mousedown 和 touchstart 事件，同時使用 handleClueCardInteractionEnd 和 handleClueCardTouchOff 函數來處理觸摸的 mouseup 和 touchend 事件。合併 Mouse 和 Touch 事件。也將處理事件的 function 更名，並在函數的部分多加一個參數判斷是 touch 還是 Mouse 事件。

const handleClueCardInteractionStart = (cardIndex, ev, isTouch = false) => {
    isShowTip.value = false;
    currentClueCardEl.value = clueCardEl.value[cardIndex];
    document.body.appendChild(currentClueCardEl.value);
    const x = isTouch ? ev.touches[0]?.pageX : ev.pageX;
    const y = isTouch ? ev.touches[0]?.pageY : ev.pageY;
    setCurrentClueCardMove(x, y - currentClueCardEl.value.offsetHeight / 2);

    const moveEvent = isTouch ? 'touchmove' : 'mousemove';
    document.addEventListener(moveEvent, handleClueCardMove);
};

 <div
    v-for="(clue, index) in clues"
    @mousedown.stop="handleClueCardInteractionStart(index, $event, false)"
    @touchstart.stop="handleClueCardInteractionStart(index, $event, true)"
    @mouseup.stop="handleClueCardInteractionEnd(index, $event)"
    @touchend.stop="handleClueCardInteractionEnd(index, $event)"
>
<!-- 略 -->
</div>

精簡動畫處理的相關變數

移除 timelineEventsStyleRaw 資料。當初動畫的流程有點複雜，關於位子的資料就有三份，
currentTimelinePosition、timelineEventsStyleRaw、timelineEventsStyleRawAnimationTarget。因為 timelineEvents 與 style 資料分不同變數處理，所以變成很難去看畫面的位置與style的對應。這邊的處理是先移除其中一份資料，將資料直接綁上 timelineEvents 的資料當中。

<div
    v-for="(timelineEvent, index) in timelineEvents"
    :style="isAnimation ? timelineEventsStyleRawAnimationTarget[index] : { transform: timelineEvent.transform }"
>
    <!--略-->
</div>

gameStatus 數據初始化流程調整

對於 initialGameState 和其他初始化數據，改使用函數來生成初始狀態，而不直接複製和解析 JSON。

const generateInitialGameState = () => ({
    currentStep: 1,
    totalStep: 8,
    stepCorrect: Array(8).fill(null),
    score: 0,
    scoreRecord: Array(8).fill(0),
});

const gameStatus = reactive(generateInitialGameState());

[補充] ChatGPT 關於重構的資料

重構（Refactoring）是一個非常重要的工程實踐，它能幫助保持程式碼的可讀性、可維護性和可擴展性。以下是三個實用的重構技巧：

1. 單一職責原則（Single Responsibility Principle）：確保每個函數、類別或模組只做一件事情。這樣做可以讓程式碼更容易理解和測試。如果一個函數或類別負責多個任務，考慮將其拆分成多個更小的部分。
2. 避免魔術數字和魔術字串（Magic Numbers and Strings）：將硬編碼的數字和字串替換為具有說明性名稱的常數或變數。這樣不僅使程式碼更容易理解，還方便未來的維護。
3. 使用設計模式（Design Patterns）：設計模式是解決特定問題的一種經過時間考驗的最佳實踐。熟悉並合理地應用設計模式可以使你的程式碼更結構化、更易於維護。